
import { Component ,OnInit } from '@angular/core';
import { Router }            from '@angular/router';  //需要下载router
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import{  Hero } from '../heros/Hrtest.module';



import { Observable }        from 'rxjs/Observable';
import { Subject }           from 'rxjs/Subject';
//Subject（主题）是一个可观察的事件流中的生产者。 searchTerms生成一个产生字符串的Observable，用作按名称搜索时的过滤条件。


// Observable class extensions
import 'rxjs/add/observable/of';


import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';

// 手动引入switchMap
import 'rxjs/add/operator/switchMap';

//引入service层有没有好的方法...
import { HeroServiceProvider } from '../../providers/hero-service/hero-service';

//从这个页面跳转至详情页
import{HeroDetailPage} from '../hero-detail/hero-detail'

//跳转至新建的detail  不使用之前的@
import{SearchDetailPage} from '../search-detail/search-detail';

/**
 * Generated class for the SbPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

//   const HEROES: Hero[] = [
//   { id: 11, name: 'Mr. Nice' },
//   { id: 12, name: 'Narco' },
//   { id: 13, name: 'Bombasto' },
//   { id: 14, name: 'Celeritas' },
//   { id: 15, name: 'Magneta' },
//   { id: 16, name: 'RubberMan' },
//   { id: 17, name: 'Dynama' },
//   { id: 18, name: 'Dr IQ' },
//   { id: 19, name: 'Magma' },
//   { id: 20, name: 'Tornado' }
// ];


@IonicPage()
@Component({
   selector: 'page-search-service',
  templateUrl: 'search-service.html',
  providers: [HeroServiceProvider] //注意这里
})



export class  SearchServicePage implements OnInit {
// heroes = HEROES; // 初始化heroes
heroes: Observable<Hero[]>;  //以每一个Hero Class 形成一个观察者的heroes
private searchTerms   = new Subject<string>();

//private router: Router; //Private /public //普通的有什么区别??
//router:Router 一样的
  constructor(public navCtrl: NavController, public navParams: NavParams, private heroSearchService: HeroServiceProvider) {
//  private router: Router 在上面的括号里设置要报错    这个估计和angular的写法不同,有空研究下angular的路由吧。这里的目的还是为了导航到具体的某个详情英雄页
//ionic Runtime Error Cannot read property 'isPromise' of undefined
  }


search(term: string): void {
    this.searchTerms.next(term);
    //每当调用search()时都会调用next()来把新的字符串放进该主题的可观察流中。
  }

  
  ionViewDidLoad() {
    console.log('ionViewDidLoad SearchServicePage');
  }


// async管道会订阅到这个可观察对象 
  // search():


    ngOnInit(): void {
      console.log('init heros',this.heroes);
      // 初始化的时候给heroes加载一个方法。 
    this.heroes = this.searchTerms
      .debounceTime(300)        // wait 300ms after each keystroke before considering the term 等待300毫秒每一次按键在考虑了每一项之前
      //在传出最终字符串之前，debounceTime(300)将会等待，直到新增字符串的事件暂停了 300 毫秒。 我们实际发起请求的间隔永远不会小于 300ms。
      .distinctUntilChanged()   // ignore if next search term is same as previous 忽略 如果下一个搜索项目是相同的//不进入后台查询了
      //确保只在过滤条件变化时才发送请求， 这样就不会重复请求同一个搜索词了。
      .switchMap(term => term   // switch to new observable each time the term changes   //切换至新的观察者 每当项目更改的时候
      //会为每个从debounce和distinctUntilChanged中通过的搜索词调用搜索服务。 它会取消并丢弃以前的搜索可观察对象，只保留最近的。
        // return the http search observable
        ? this.heroSearchService.search(term)     //如果有一个新的term 就会执行查询,否者就继续观察者监视Hero           
        // or the observable of empty heroes if there was no search term 
        : Observable.of<Hero[]>([]))   //obverable是空的,如果没有搜索项的时候
      .catch(error => {
        // TODO: add real error handling
        console.log(error); //返回一个错误。
        return Observable.of<Hero[]>([]);


//         借助switchMap操作符 (正式名称是flatMapLatest) 每次符合条件的按键事件都会触发一次对http()方法的调用。即使在发送每个请求前都有 300 毫秒的延迟， 我们仍然可能同时拥有多个在途的 HTTP 请求，并且它们返回的顺序未必就是发送时的顺序。
// switchMap()保留了原始的请求顺序，并且只返回最近一次 http 调用返回的可观察对象。 这是因为以前的调用都被取消或丢弃了。
// 如果搜索框为空，我们还可以短路掉这次http()方法调用，并且直接返回一个包含空数组的可观察对象。
// 注意，取消HeroSearchService的可观察对象并不会实际中止 (abort) 一个未完成的 HTTP 请求， 除非服务支持这个特性，这个问题我们以后再讨论。 目前我们的做法只是丢弃不希望的结果。
      });
  }
  //如果我们直接把每一次用户按键都直接传给HeroSearchService，就会发起一场 HTTP 请求风暴。 这可不好玩。我们不希望占用服务器资源，也不想耗光蜂窝移动网络的流量。



// 取消了脏检查  使用了observer 对象模式  优化了方法。
  gotoDetail(hero: Hero): void {
    // let link = ['/detail', hero.id];
    // this.router.navigate(link);
    console.log(hero);
     this.navCtrl.push(SearchDetailPage, {
      id: hero.id,
      hero:hero
    });
  }



  

}


